<template>
<div>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="name"
      label="文章标题"
      width="180">
    </el-table-column>
    <el-table-column
      prop="content"
      label="文章内容">
    </el-table-column>
     <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
  @current-change="changePage"
  @size-change="changeSize"
  :style="{'margin-top':'100px'}"
  :page-size="5"
    background
    :page-sizes="[5,10,15,20]"
    :current-page="this.currentPage"
    layout="prev, pager, next,sizes"
    :total="total">
  </el-pagination>
</div>
  
</template>

<script>
 export default {
   created() {
     this.$ajax.getArticle({
        currentPage:this.currentPage,
        pageSize:this.pageSize,
        modeltext:'正在加载...'
     })
     .then(res=>{
       console.log(res)
       this.tableData=res.data.data
       this.total=res.data.total
     })
   },
    data() {
      return {
        tableData: [
          {
          name: '王小虎',
          content: '上海市普陀区金沙江路 1518 弄'
          }
        ],
        total:0,
        currentPage:1,
        pageSize:5,
        articleTitle:''
      }
    },
    methods:{
        remindDel(row){
              this.$confirm(`此操作将永久删除文章'${this.articleTitle}', 是否继续?`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              center: true
            }).then(() => {
              this.currentPage=1
              this.$ajax.delArticle({
                id:row._id,
                currentPage:this.currentPage,
                pageSize:this.pageSize,
                modeltext:'正在删除'
              })
              .then(res=>{
                if(res.data.msg==='success')
                {
                    this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                  this.tableData=res.data.data
                  this.total=res.data.total
                  console.log(this.total)
                }
               
              })
             
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
        },
       handleEdit(index, row) {
        console.log(index, row);
        this.$router.push({
          name:'editarticle2',
          params:{
            id:row._id
          }
        })
      },
      handleDelete(index, row) {
        console.log(index, row);
        this.articleTitle=row.name
        this.remindDel(row)
      },
      changePage(page){
        console.log(page)
        this.currentPage=page
        this.$ajax.getArticle({
          currentPage:this.currentPage,
          pageSize:this.pageSize
        })
        .then(res=>{
          console.log(res)
          this.tableData=res.data.data
          this.total=res.data.total
        })
      },
      changeSize(size){
        console.log(size)
        this.pageSize=size
        this.currentPage=1
        this.$ajax.getArticle({
          currentPage:this.currentPage,
          pageSize:this.pageSize
        })
        .then(res=>{
          console.log(res)
          this.tableData=res.data.data
          this.total=res.data.total
        })
      }
    }
  }
</script>

<style>

</style>
